<%@page import="org.springframework.web.context.request.SessionScope"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Book</title>
<link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrapUI.css">
<link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/book/book.css">
<link rel="stylesheet" href="common/css/popupUI.css">
<script type="text/javascript" src="component/jquery-3.1.1.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="common/js/book/bookFrontend_separate.js"></script>

<script type="text/javascript">
   		var localization =  window.location.href.split("lang=")[1].substring(0,5);
    	if(localization!=""){
    		
    		var exdate = new Date();
    		   exdate.setDate(exdate.getDate() + 7 * 24 * 3600 * 1000);
    		   document.cookie = "lang=" + escape(localization) + ";expires=" + exdate.toGMTString();
    	
    	}
</script>

</head>
<body>
	<!-- head -->
	<div class="head clearfix">
		<h2 class="headtitle" style="padding-top: 13px"><spring:message code="AccenturePortal"/></h2>
		<ul class="nav">
			<li class="navlist" style="cursor: default;">
				${sessionScope.user.user_name}
			</li>
			<li class="navlist" style="cursor: default;">
				<div class="headimage">
					<img src="${sessionScope.user.user_image}" class="img-circle center-block" alt="" style="margin-top: 15px">
				</div>
			</li>
			<li class="navlist">
				<span class="glyphicon glyphicon-cog dropdown-toggle" id="navbarPreferences" aria-expanded = "true"   style="margin-top: 15px"></span>
				<ul class="dropdown-menu dropdownMenu" id="preferencesTab" role="menu" style="left:-120px;top:48px;">
					<li class="divider" id="lineDivider" role="separator"></li>
					<li><a href="index.action"><spring:message code="mainpage"/></a></li>
					<c:if test="${sessionScope.user.user_levelid eq 5}"> 
					<li class="divider" id="lineDivider" role="separator"></li>
					<li><a href="management.action"><spring:message code="MANAGEMENT"/></a></li>
					</c:if>
					<li class="divider" id="lineDivider" role="separator"></li>
					<li id="logoutNext"><a href="logout.action"><spring:message code="LOGOUT"/></a></li>	
					<li class="divider" id="lineDividerNext" role="separator"></li>
					<li id = "languageChange"><a href="http://localhost:8080/Accenture_Portal3.0/showBooks.action?borrowReaderid=${sessionScope.user.user_id}&lang=zh_CN"><spring:message code="language.cn"/></a></li>
					<li class="divider" id="lineDividerNext" role="separator"></li>
					<li id = "languageChange"><a href="http://localhost:8080/Accenture_Portal3.0/showBooks.action?borrowReaderid=${sessionScope.user.user_id}&lang=en_US"><spring:message code="language.en"/></a></li>
				</ul>
			</li>
		</ul>
	</div>

	<!-- carousel -->
	<div id="myCarousel" class="carousel slide"
		style="background: url('common/images/book_background.jpg'); height: 205px;">
	</div>

	<!-- down -->
	<div class="down">
		<!-- search -->
		<div class="search-section">
			<div class="searchlink ">
			<form id="searchBooks" action="searchBooks.action" method="post">
				<input type="text" id="showsearch" class="searchinput" name="keyword"
					placeholder="<spring:message code="FindBook"/>"> 
				<input type="hidden" name="borrowReaderid" value="${sessionScope.user.user_id}">
				<span class="glyphicon glyphicon-search" onclick="document.getElementById('searchBooks').submit();" ></span>
			</form>
			</div>
		</div>

		<div class="allBook">
			<div class="itemBox" id="itemBox">
			<c:choose>
			<c:when test="${not empty allBookList}">
			<div class="bookTitle">
				<h1><spring:message code="CANBORROWBOOK"/></h1>
			</div>
				
				<div id="showBook">
				<c:forEach items="${allBookList}" var="book" >
					<div class="item" id="item">
						<img src="${book.bookImage}" />
						<h6>${book.bookName}</h6>
						<h6>${book.bookAuthor}</h6>
						<div class="link">
							<div class="detail" id="bookDetail">
								<p class="bookid">${book.bookId}</p> 
								<a href="#"><spring:message code="view"/></a>
							</div>
							<%-- <div class="look" id="bookBorrow"><a href="javascript:void(0)" onClick="window.location='showBorrowBook.action?bookId=${book.bookId}&borrowReaderid=${sessionScope.user.user_id}'"><spring:message code="borrow"/></a></div> --%>
							<div class="bookBorrow">
								<input class="borrowBookById" type="hidden" value="${book.bookId}">
								<input class="borrowBookByUserId" type="hidden" value="${sessionScope.user.user_id}">
								<a href="#"><spring:message code="borrow"/></a>
							</div> 
						</div>
					</div>
				</c:forEach>
				</div>
				</c:when>
				<c:otherwise>
					<div style="margin-top: 17%;margin-left: 35%">
						<a href="showBooks.action?borrowReaderid=${sessionScope.user.user_id}" class="btn" ><spring:message code="Can'tfindthisbook"/></a>
					</div>
				</c:otherwise>
				</c:choose>
			</div>

			<div class="borrowBook">
				<div class="borrowTitle">
					<h1><spring:message code="borrowedbook"/></h1>
				</div>
				<c:forEach items="${userBorrowBook}" var="userBook">
				<div class="borrow">
					<span>${userBook.bookName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					
                        <c:if test="${userBook.leftDay < 0}">
                           <strong><font color="red"><spring:message code="expired"/></font></strong>
                        </c:if>
                        <c:if test="${userBook.leftDay == 0}">
                            <strong><font color="red"><spring:message code="immediately"/></font></strong>
                        </c:if>
                        <c:if test="${userBook.leftDay > 0 && userBook.leftDay <= 5}">
                        	<spring:message code="return"/><strong><font color="red">${userBook.leftDay}</font></strong><spring:message code="day"/>
                        </c:if>
                        <c:if test="${userBook.leftDay > 5}">
                        	<spring:message code="return"/>${userBook.leftDay}<spring:message code="day"/>
                        </c:if>
					</span>
					<%-- <a href="javascript:void(0)" onClick="window.location='showReturnBook.action?borrowId=${userBook.borrowId}'">退还</a> --%>
					<%-- <a href="javascript:void(0)" onClick="javascript:confirmReturn('${userBook.borrowId}','${userBook.bookName}','${sessionScope.user.user_id}');"><spring:message code="returnbook"/></a> --%>
					<a class="returnBookButton" style="cursor:pointer" >
						<input class="borrowIdCurrent" type="hidden" value="${userBook.borrowId}">
						<input class="userIdCurrent" type="hidden" value="${sessionScope.user.user_id}">
						<spring:message code="returnbook"/>
					</a>
				</div>
				</c:forEach>
			</div>
			<div class="clear"></div>
		</div>

	</div>

	<!-- footer -->	
	<div class="footer">
		Copyright 2001 - 2017 Accenture. All Rights reserved. Accenture Confidential. For Internal Use Only. 
		<a href="#">Terms of Use</a> | 
		<a href="#">Privacy Statements</a>
	</div>
	
	<!-- 书详情弹窗 -->
	<div class="fullScreen" id="bookDetailPopup" >
		<div class="modal-content" style="top: 12%;">
			<div class="popup">
				<div class="modal-header" style="height:50">
					<div class="row">
						<div class="col col-md-11" id="articleTitle">
					<h3 class='modal-title' style="font-size:18px;color:gray;padding:10px 10px"><spring:message code="Bookdetail"/></h3>
						</div>
						<div class="col-md-1">
							<button type="button" class="close close-lg" id="closeDetailPopup">×</button>
						</div>
					</div>
				</div>
				<div id="MailerContentArea" style="height:400px">
					<div class="mailerContent">
							<div class="left" style="width:240px;height:300px;float:left;margin-left:10%;margin-top:5%;">
							
							</div>
							<div class="right" style="width:45%;float:right;margin-top:5%">

							</div>
						</div>
					</div>
				</div>
				<br>
			</div>
		</div>
		
		<!-- 还书弹窗 -->
	  <div class="fullScreen" id="returnBook" >
			<div class="modal-content" style="height:250px;width:350px;margin-left:18%;border-radius:5px;margin-top: 9%;" >
				<div class="popup">
				<div class="modal-header" style="height:20px;background-color:white;border-bottom:0px;">
				<div style="text-align:center;margin-top:90px;font-size:20px;"><spring:message code="SureReturn"/></div>
				
				<button type="button" id="cancelReturnBook" class="button button-small border-blue" style="margin-top:40px;margin-left:60px;width:100px;height:40px;font-size:16px;"><spring:message code="Cancel"/></button>
				
				<button type="button" id="sureReturnBook" class="button button-small border-blue" style="margin-left:30px;margin-top:40px;width:100px;height:40px;font-size:16px;"><spring:message code="Sure"/></button>
				
					</div> 
				</div>
			</div>		
		</div>
		
		 <!-- popup borrow -->
  <div class="fullScreen" id="borrowBookPopup" >
		<div class="modal-content">
			<div class="popup">
				<div class="modal-header" style="height:50">
					<div class="row">
						<div class="col col-md-11" id="articleTitle">
					<h3 class='modal-title' style="font-size:18px;color:gray;padding:10px 10px"><spring:message code="BorrowBook"/></h3>
						</div>
						<div class="col-md-1">
							<button type="button" class="close close-lg" id="closeBorrowPopup">×</button>
						</div>
					</div>
				</div>
				<div id="MailerContentArea"  style="height:350px;overflow:hidden;">
					<div class="mailerContent" id="articleContentIndex">
							
							<div>
								<h1 align="center"><spring:message code="Hello"/>&nbsp;&nbsp;&nbsp;${sessionScope.user.user_name}</h1><br><br>
								<div class="showBorrowInfor">
									
								</div>
							</div>
							
							<div class="tab-panel active" id="tab-set">
								<form action="borrowBook.action" method="post" name="book" class="form-x">
									<div class="form-group" style="height:80px">
										<div class="label" style="float:left;padding-left: 25%;">
											<h3 style="color:black;font-weight:lighter;"><spring:message code="borrowingdays"/></h3>
										</div>
										<div class="field" style="float:right;padding-right: 32%;padding-top: 3%;">
											<select class="input" style="display:inline;width:120px;cursor:pointer" name="mustReturn">
												<option value="7"><spring:message code="oneweek"/></option>
											    <option value="14"><spring:message code="twoweek"/></option>
											    <option value="30"><spring:message code="onemouth"/></option>
											    <option value="60"><spring:message code="twomouth"/></option>
											</select>
										</div>
									</div>
									<input type="hidden" name="borrowBookid" id="borrowBookid" value=""/>
									<input type="hidden" name="borrowReaderid" value="${sessionScope.user.user_id}"/>

									<input type="submit" value="<spring:message code="borrow"/>" class="button button-small border-blue" style="margin-left:400px;"/>
								</form>
							</div>
							
						</div>
				</div> 
			</div>
		</div>		
	</div>
	
	<!-- 超过三本弹窗 -->
	<div class="fullScreen" id="overBookPopup" >
		<div class="modal-content" style="height:250px;width:350px;margin-left:18%;border-radius:5px;margin-top: 9%;" >
			<div class="popup">
			<div class="modal-header" style="height:20px;background-color:white;border-bottom:0px;">
			<div style="text-align:center;margin-top:90px;font-size:20px"><spring:message code="overBook"/></div>
			<button type="button" id="overBookClose" class="button button-small border-blue" style="margin-left:120px;margin-top:40px;text-align:center; width:100px;height:40px;font-size:16px;"><spring:message code="OK"/></button>
				</div> 
			</div>
		</div>		
	</div>
	 
	 <script type="text/javascript">
		$("#myCarousel").carousel('cycle');
		$("#navbarPreferences").click(function(){
		    $("#preferencesTab").toggle();
	});
	</script>
</body>
</html>
